<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0; margin: 0;
			}
			html,body{
				width: 100%; height: 100%;
			}
			#box{
				margin: auto;
				width: 490px;
				height: 340px;
				border: 1px solid #000000;
				position: relative;
			}
			div.item{
				width: 150px;
				height: 100px;
				border-radius: 5px;
				margin: 5px;
				float: left;
				background: goldenrod;
				border: 1px solid lightgray;
				z-index: 1;
				text-align: center;
				font-size: 60px;
				line-height: 100px;
			}
			div.moving{
				border: 1px dashed gray;
				background: white;
			}
			div.draging{
				width: 150px;
				height: 100px;
				position: absolute;
				background: goldenrod;
				box-shadow: 0 0 4px 2px #555;
				border-radius: 5px; 
				text-align: center;
				font-size: 60px;
				line-height: 100px;
				z-index: 500;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="item">A</div>
			<div class="item">B</div>
			<div class="item">C</div>
			<div class="item">D</div>
			<div class="item">E</div>
			<div class="item">F</div>
			<div class="item">G</div>
			<div class="item">H</div>
			<div class="item">I</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript">
			//当鼠标按下时；
				var $div = $("#box div");
				var $box = $("#box");
			$div.mousedown(function(e){
				//当我按下时，当前元素样式改变，同时生成一个新的div
				$(this).addClass("moving");
				var that = this;
				var $newDiv = $("<div>");
				//把当前div的位置给新的
				$newDiv.css("left",$(this).position().left).css("top",$(this).position().top);
				$newDiv.addClass("draging").html($(this).html());
				$(this).html("")
				$box.append($newDiv)
				//当前鼠标的位置
				var mouseX=e.offsetX;
				var mouseY=e.offsetY;
				//移动时
				$(window).mousemove(function(e){
					$newDiv.css("left",e.clientX-$box.offset().left-mouseX).css("top",e.clientY-$box.offset().top-mouseY)
				})
				//当松开鼠标时
				$newDiv.mouseup(function(e){
//					console.log("jj")
					//停止移动
					$(window).off("mousemove");
					//进行判断，九个宫格的左上角哪个距离自己最近；遍历计算
					//定一个最短距离，和最小高度；当每次都判断结束时，最小高度便是最小高度；
					//除了最后一个，因为最后一个是自己拖住的那个；
					var minDistance=500;//这个地方的最小距离是随便设的，因为是用来初始比较保存下标的，所以无所谓
					var minIndex=$newDiv.index();
					$("#box div:not(:last)").each(function(){
						//利用勾股定理，求出最短距离
						var distance = Math.sqrt(Math.pow($newDiv.offset().left-$(this).offset().left,2)+Math.pow($newDiv.offset().top-$(this).offset().top,2));
						if(distance<minDistance){
							minDistance=distance;
							minIndex=$(this).index();
						}
					})
//						console.log(that)
//					console.log(minIndex)
//					如果是离自己最近
					if(minIndex == $(that).index()){
						//会到原位
						$newDiv.stop().animate({left:$(that).position().left,top:$(that).position().top},500,function(){
							//因为本身就有样式，删掉后加上的就行了
							$(that).removeClass("moving");
							$(that).html($newDiv.html());
							$newDiv.remove();
						})
					}else{
						var swop = $div.eq(minIndex);
						$newDiv.stop().animate({left:swop.position().left,top:swop.position().top},500,function(){
							//交换元素；
							//被交换的元素新建一个元素
							var $newSwop = $("<div>");
							//初始位置；
							$newSwop.css(swop.position())
							//交换的加样式
							$newSwop.addClass("draging");
							//将交换的中的加文字
							$newSwop.html(swop.html());
							//失去的加空白
							swop.addClass("moving");
							//放在box中
							$("#box").append($newSwop);
//							console.log($(that))
							$newSwop.stop().animate($(that).position(),500,function(){
								
								//被交换位置的删除样式样式；
								swop.removeClass("moving");
								//添加文字
								swop.html($newDiv.html());
								//给原位置加样式；
								$(that).removeClass("moving");
								//原位置添加文字
								$(that).html($newSwop.html())
								//删除
								$newSwop.remove();
								$newDiv.remove();
							});
						});
					}
				})
			})
		</script>
	</body>
</html>









